<!DOCTYPE html>
<%@ include file="../base.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link href="${ctx}/assets/images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <title>${prPrice.stationName}</title>
        <%@ include file="../js.jsp"%>
    </head>
    <body ontouchstart>
        <div class="page-relative">
        	<form id="authority_form" method="post">
        		<div class="pad-20">
		            <div class="refuel-container">
		                <div class="refuel-info">
		                    <p>${prPrice.prName}</p>
		                </div>
		                <div class="refuel-info">
		                    <p><b class="text-blue">${prPrice.fpNo}</b> 号枪</p>
		                    <input type="hidden" value="${prPrice.fpId}" id="fpId" name="fpId"/>
	                     	<input type="hidden" value="${prPrice.stationId}" id="stationId" name="stationId"/>
	                     	<input type="hidden" value="${member.isCheckFuellingPw}" id="isCheckFuellingPw" name="isCheckFuellingPw"/>
	                     	<input type="hidden" value="${member.memberId}" id="memberId" name="memberId"/>
	                      	<input type="hidden" value="${member.memberName}" id="memberName" name="memberName"/>
		                </div>
		            </div>
	            </div>
	            <div class="bd">
	                <div class="weui_cells_title">你的账户余额是 <b class="text-red">${member.amount}</b> 元</div>
	                <div id="showActionSheet" class="refuel_input">
	                    <p class="refuel_content" id="new_amount">请输入加油金额</p>
	                    <input type="hidden" id="memberFrozenAmount" name="memberFrozenAmount"/>
	                </div>
	                <div class="weui_btn_area">
	                    <a href="javascript:;" class="weui_btn weui_btn_primary" id="fuellingSubmit">确认加油</a>
	                    <p class="text-center text-gray alert-info">余额不足？
	                    <a href="${ctx}/scanRefueling/pointAuth?stationId=${prPrice.stationId}&fpId=${prPrice.fpId}&memberId=${member.memberId}&memberName=${member.memberName}">积分卡登记</a></p>
	                </div>
	            </div>
	            
	            <!-- loading toast -->
	            <div id="loadingToast" class="weui_loading_toast" style="display:none;">
	                <div class="weui_mask_transparent"></div>
	                <div class="weui_toast">
	                    <div class="weui_loading">
	                        <div class="weui_loading_leaf weui_loading_leaf_0"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_1"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_2"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_3"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_4"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_5"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_6"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_7"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_8"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_9"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_10"></div>
	                        <div class="weui_loading_leaf weui_loading_leaf_11"></div>
	                    </div>
	                    <p class="weui_toast_content">数据加载中</p>
	                </div>
	            </div>
	
	            <!--BEGIN actionSheet-->
	            <div id="actionSheet_wrap">
	                <div class="weui_mask_transition" id="mask"></div>
	                <div class="weui_actionsheet" id="weui_actionsheet">
	                    <div class="weui_actionsheet_menu">
	                        <div class="refuel_keyboard">
	                            <div class="refuel_value">
	                                <div class="pad-10 no-padding-b">
	                                    <h4>请输入加油金额</h4>
	                                </div>
	                            </div>
	
	                            <div class="refuel_key">
	                                <div class="refuel-key-20"><p>100</p></div>
	                                <div class="refuel-key-20"><p>200</p></div>
	                                <div class="refuel-key-20"><p>300</p></div>
	                                <div class="refuel-key-20"><p>400</p></div>
	                                <div class="refuel-key-20"><p>加满</p></div>
	
	                                <div class="refuel-key-25"><p>1</p></div>
	                                <div class="refuel-key-25"><p>2</p></div>
	                                <div class="refuel-key-25"><p>3</p></div>
	                                <div class="refuel-key-cancel"><p>X</p></div>
	
	                                <div class="refuel-key-75">
	                                    <div class="refuel-key-33"><p>4</p></div>
	                                    <div class="refuel-key-33"><p>5</p></div>
	                                    <div class="refuel-key-33"><p>6</p></div>
	
	                                    <div class="refuel-key-33"><p>7</p></div>
	                                    <div class="refuel-key-33"><p>8</p></div>
	                                    <div class="refuel-key-33"><p>9</p></div>
	
	                                    <div class="refuel-key-33"><p>00</p></div>
	                                    <div class="refuel-key-33"><p>0</p></div>
	                                    <div class="refuel-key-33"><p>.</p></div>
	                                </div>
	
	                                <div class="refuel-key-submit"><p>完成</p></div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <!--END actionSheet-->
	
	            <div class="push"></div>
			</form>
        </div>
        <%@ include file="../bottom.jsp"%>
        <script>
        $(function () {

             $('#showActionSheet').click(function() {
                 var mask = $('#mask');
                 var weuiActionsheet = $('#weui_actionsheet');
                 var value = '';
                 var ctl = 0;

                 // Reset layout
                 $('.refuel_content, .refuel_value h4').html('请输入加油金额');
                 $('.refuel_input').css({
                     color: "#D9D9D9"
                 });

                 weuiActionsheet.addClass('weui_actionsheet_toggle');
                 mask.show().addClass('weui_fade_toggle').click(function () {
                     hideActionSheet(weuiActionsheet, mask);
                 });
                 $('#actionsheet_cancel').click(function () {
                     hideActionSheet(weuiActionsheet, mask);
                 });
                 weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

                 // Layout
                 var width = weuiActionsheet.find('p').width();
                 weuiActionsheet.find('p').css({
                     height: width * 0.75,
                     "line-height": width * 0.75 + "px"
                 });
                 weuiActionsheet.find('.refuel_key').css({
                     height: width * 4.44444444 - 6
                 });
                 $('.refuel_key div').css({
                     "margin-bottom": (width / 9) + "px"
                 });
                 $('.refuel-key-submit').css({
                     height: $('.refuel-key-75').height() - (width / 9)
                 });
                 $('.refuel-key-submit p').css({
                     height: $('.refuel-key-75').height() - (width / 9),
                     "line-height": ($('.refuel-key-75').height() - (width / 9)) + "px"
                 });

                 // Get Value
                 weuiActionsheet.find('.refuel-key-20 p').on('click', function () {
                     value = $(this).html();
                     $('.refuel_value h4').html(value);
                     ctl = 1;
                 });

                 weuiActionsheet.find('.refuel-key-25 p, .refuel-key-33 p').on('click', function () {
                     if (ctl === 0) {
                         value = value.concat($(this).html());
                         $('.refuel_value h4').html(value);
                     }
                 });

                 // Cancel
                 $('.refuel-key-cancel').on('click', function () {
                     $('.refuel_content, .refuel_value h4').html('请输入加油金额');
                     $('.refuel_input').css({
                         color: "#D9D9D9"
                     });
                     hideActionSheet(weuiActionsheet, mask);
                 });

                 // Submit
                 $('.refuel-key-submit').on('click', function () {
                     if (value === '') {
                         hideActionSheet(weuiActionsheet, mask);
                     } else {
                     $('.refuel_content').html(value);
                         $('.refuel_input').css({
                             color: "#333"
                         });
                     }
                     hideActionSheet(weuiActionsheet, mask);
                 });

                 function hideActionSheet(weuiActionsheet, mask) {
                     weuiActionsheet.removeClass('weui_actionsheet_toggle');
                     mask.removeClass('weui_fade_toggle');
                     weuiActionsheet.on('transitionend', function () {
                         mask.hide();
                     }).on('webkitTransitionEnd', function () {
                         mask.hide();
                     })
                 }
       		 });
       	});
        
        $('#fuellingSubmit').click(function() {
            var $loadingToast = $('#loadingToast');
            if ($loadingToast.css('display') != 'none') {
                return;
            }
            var new_amount = $("#new_amount").html();
  			if(new_amount == "加满"){
  				new_amount = 0;
  			}else{
  				if(!new_amount.match(/^(([1-9]\d{0,9})|0)(\.\d{1,2})?$/)){
	   	   					 alert("请输入合法金额");  
	   	   				     return;  
					}
     			if(${member.amount} < new_amount){
     				alert('余额不足');
     				return;
     			}
  			}	
            $loadingToast.show();
  			$("#memberFrozenAmount").val(new_amount);
  			$("#fuellingSubmit").attr("disabled", true);
  			$("#authority_form").attr("action", '${ctx}/scanRefueling/authority').submit();
             
             /* setTimeout(function () {
                 $loadingToast.hide();
             }, 2000); */
         });
        </script>
    </body>
</html>